<template> 
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleSearchList()"
          type="primary"
          size="small">
          查询结果
        </el-button>
        <el-button
          style="float: right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input style="width: 203px" v-model="listQuery.object.specName" placeholder="规格名称"></el-input>
          </el-form-item>         
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button
        class="btn-add"
        @click="addSpecPage()"
        size="mini">
        添加
      </el-button>
    </el-card>
    <div class="table-container">
      <el-table ref="productTable"
                :data="list"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                v-loading="listLoading"
                border>
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="编号" width="170" align="center">
          <template slot-scope="scope">{{scope.row.specCode}}</template>
        </el-table-column>
        <el-table-column label="规格名称" width="200" align="center">
          <template slot-scope="scope">{{scope.row.specName}}</template>
        </el-table-column>
             <el-table-column label="备注" width="160" align="center">
          <template slot-scope="scope">{{scope.row.specName}}</template>
        </el-table-column>
             <el-table-column label="状态" width="115" align="center">
          <template slot-scope="scope">{{scope.row.status}}</template>
        </el-table-column>
          <el-table-column label="创建人" width="110" align="center">
          <template slot-scope="scope">{{scope.row.creator}}</template>
        </el-table-column>
             <el-table-column label="创建时间" width="100" align="center">
          <template slot-scope="scope">{{scope.row.createDate}}</template>
        </el-table-column>
            <el-table-column label="更新人" width="110" align="center">
          <template slot-scope="scope">{{scope.row.updator}}</template>
        </el-table-column>
             <el-table-column label="更新时间" width="100" align="center">
          <template slot-scope="scope">{{scope.row.updateDate}}</template>
        </el-table-column>
        <el-table-column label="操作" min-width="270" align="center">
          <template slot-scope="scope">
            <p>
              <el-button
                size="mini"
                @click="handleShowSpecRang(scope.$index, scope.row)">查看参数值
              </el-button>            
              <el-button
                size="mini"
                @click="handleSpecAvi(scope.$index, scope.row)">启用
              </el-button>

                <el-button
                size="mini"
                type="danger"
                @click="handleSpecDis(scope.$index, scope.row)">禁用
              </el-button>

            </p>
           
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[5,10,15]"
        :current-page.sync="listQuery.pageNum"
        :total="total">
      </el-pagination>
    </div>
        <el-dialog
      title="新增规格"
      :visible.sync="specpage.dialogVisible"
      width="500px">
      <el-form :model="spec" :rules="rules" ref="specInfoForm" label-width="120px" style="width: 400px" size="small">
      <el-form-item label="规格名称：" prop="specName">
        <el-input v-model="spec.specName"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="spec.remarks"></el-input>
      </el-form-item>
     
    </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="specpage.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddSpecConfirm">确 定</el-button>
      </span>
    </el-dialog>

      <el-dialog
      title=""
      :visible.sync="specRangpage.adddialogVisible"
      width="40%">
      <el-form :model="specRangValue" :rules="rulesRangVlue" ref="specrangI" label-width="120px" style="width: 400px" size="small">
      <el-form-item label="参数值：" prop="rangeValue">
        <el-input v-model="specRangValue.rangeValue"></el-input>
      </el-form-item>     
    </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="specRangpage.adddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddSpecRangValue">确 定</el-button>
      </span>
    </el-dialog>


      <el-dialog
      title="添加参数"
      :visible.sync="specRangpage.dialogVisible"
      width="40%">
       <el-button @click="specRangpage.adddialogVisible = true">添加</el-button>
       <el-table ref="specRangTable"
                :data="specRangList"
                style="width: 150%;height:150%"
                @selection-change="handleSelectionChange"
                v-loading="listLoading"
                >
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="参数值" width="75" align="center">
          <template slot-scope="scope">{{scope.row.rangeValue}}</template>
        </el-table-column>
        <el-table-column label="是否可用" width="85" align="center">
          <template slot-scope="scope">{{scope.row.status}}</template>
        </el-table-column>
          <el-table-column label="创建人" width="75" align="center">
          <template slot-scope="scope">{{scope.row.creator}}</template>
        </el-table-column>
             <el-table-column label="创建时间" width="100" align="center">
          <template slot-scope="scope">{{scope.row.createDate}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <p>
              <el-button
                size="mini"
                @click="handleAvailable(scope.$index, scope.row)">启用
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handledisable(scope.$index, scope.row)">禁用
              </el-button>
            </p>           
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="specRangpage.dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import {
    fetchList,
    addSpec,
    addSpecRang,
    fetchListSpecRang,
    addSpecRangValue,
    updateSpecRangValueAvailable,
    updateSpecRangValueDisable,
    updateSpecDisable,
    updateSpecAvailable
  } from '@/api/spec'


  const defaultListQuery = {
    pageNum: 1,
    pageSize: 5,
    object:{specName:''}
  };
    const defaultspec={
    specName: '',
    remarks: '',

  };
      const defaultspecRangValue={
    rangeValue: '',
    specCode:''
  };
     const specRangValueStatus={
    rangeCode:'',
    status: ''
  };
       const specStatus={
    specCode:'',
    status: ''
  };

  export default {
    // name: "spec",
    name: "specInfoForm",
    props: {
      value: Object,
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {       
       specpage:{
          dialogVisible:false
        },
        specRangpage:{
          dialogVisible:false,
          adddialogVisible:false,
          object:{specCode:''}
        },
        spec:Object.assign({}, defaultspec),
        specRangValue:Object.assign({}, defaultspecRangValue),
         rules: {
          specName: [
            {required: true, message: '请输入规格名称', trigger: 'blur'},
            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
          ],
          remarks: [
            {required: true, message: '请输入备注', trigger: 'blur'}
          ]
        },
        rulesRangVlue: {
          rangeValue: [
            {required: true, message: '请输入规格名称', trigger: 'blur'},
            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
          ]
        },
        operateType: null,
        listQuery: Object.assign({}, defaultListQuery),
        list: null,
        specRangList:null,
        total: null,
        listLoading: true,
        selectProductCateValue: null,
        multipleSelection: [],
        productCateOptions: [],
        brandOptions: []       
      }
    },
    created() {
      this.getList();
    },
    watch: {
      selectProductCateValue: function (newValue) {
        if (newValue != null && newValue.length == 2) {
          this.listQuery.productCategoryId = newValue[1];
        } else {
          this.listQuery.productCategoryId = null;
        }

      }
    },
    filters: {
      verifyStatusFilter(value) {
        if (value === 1) {
          return '审核通过';
        } else {
          return '未审核';
        }
      }
    },
    methods: {
      handleSelectionChange () {

      },
      handleSizeChange (val) {
        this.listQuery.pageSize = val;
        this.listQuery.pageNum = 1
        this.getList()
      },
      handleCurrentChange (val) {
        this.getList()
      },
      getList() {
        this.listLoading = true;
        fetchList(this.listQuery).then(response => {
          this.listLoading = false;
          this.list = response.data.list;
          this.total = response.data.total;
        });
      },
     
      addSpecPage(){
        this.specpage.dialogVisible=true;
      },
     handleAddSpecConfirm(){
       addSpec(this.spec).then(response => {
         if(response.code=200){
         this.specpage.dialogVisible=false;
       this.getList();
       this.spec.specName='';
       this.spec.remarks='';
       }else{
          this.$message({
            message: response.msg,
            type: 'warning',
            duration: 1000
          });
          return;
       }
       });

       
       
     },
     handleAddSpecRangValue(){
       debugger
       this.specRangValue.specCode=this.specRangpage.object.specCode;
       addSpecRangValue(this.specRangValue).then(response => {
         if(response.code==200){
           this.specRangValue.specCode='';
           this.specRangValue.rangeValue='';
           this.specRangpage.adddialogVisible=false;
           fetchListSpecRang(this.specRangpage.object).then(response => {
         if(response.code=200){
        this.specRangList=response.data;
         }
       })
         }else{
            this.$message({
            message: response.msg,
            type: 'warning',
            duration: 1000
          });
          return;
         }
       }

       );
     },
      handleSpecAvi(index, row){
       debugger;
       specStatus.specCode=row.specCode;
       specStatus.status="可用";
       updateSpecAvailable(specStatus).then(response=>{
         if(response.code=200){
       this.getList().then(response => {
         if(response.code=200){
        this.list=response.data;
         }
       })
         }else{
            this.$message({
            message: response.msg,
            type: 'warning',
            duration: 1000
          });
          return;
         }
      
       })

     },
      handleSpecDis(index, row){
       debugger;
       specStatus.specCode=row.specCode;
       specStatus.status="禁用";
       updateSpecDisable(specStatus).then(response=>{
         if(response.code=200){
       this.getList().then(response => {
         if(response.code=200){
        this.list=response.data;
         }
       })
         }else{
            this.$message({
            message: response.msg,
            type: 'warning',
            duration: 1000
          });
          return;
         }
      
       })

     },
     handleAvailable(index, row){
       debugger;
       specRangValueStatus.rangeCode=row.rangeCode;
       specRangValueStatus.status="可用";
       updateSpecRangValueAvailable(specRangValueStatus).then(response=>{
         if(response.code=200){
  fetchListSpecRang(this.specRangpage.object).then(response => {
         if(response.code=200){
        this.specRangList=response.data;
         }
       })
         }else{
            this.$message({
            message: response.msg,
            type: 'warning',
            duration: 1000
          });
          return;
         }
      
       })

     },
          handleShowSpecRang(index,row){
        debugger
        if(!row.specCode){
           this.$message({
            message: "请勾选查看的行",
            type: 'warning',
            duration: 1000
          });
          return;
        }
        this.specRangpage.dialogVisible=true;
        this.specRangpage.object.specCode=row.specCode;
        fetchListSpecRang(this.specRangpage.object).then(response => {
         if(response.code=200){
        this.specRangList=response.data;
       }
        console.log("handleShowProduct",row);
      })
      },
      handledisable(index, row){
       debugger;
       specRangValueStatus.rangeCode=row.rangeCode;
       specRangValueStatus.status="禁用";
       updateSpecRangValueDisable(specRangValueStatus).then(response=>{
         if(response.code=200){
  fetchListSpecRang(this.specRangpage.object).then(response => {
         if(response.code=200){
        this.specRangList=response.data;
         }
       })
         }else{
            this.$message({
            message: response.msg,
            type: 'warning',
            duration: 1000
          });
          return;
         }
      
       })

     },
      handleSearchList() {
        this.listQuery.pageNum = 1;
        this.getList();
      },   
     
    }
  }
</script>
<style></style>


